<template>
	<view class="conChildrenComment">
		<view :class="{childrenCommentItem:true,childrenCommentItemUnShow:!isReady}">
			<view class="conInf" @touchstart="propsFunction.touchStart(source)" @touchend="propsFunction.touchEnd">
				<view class="crUserInf">
					<view class="crUserAvatar">
						<image :src="
				(source.User && source.User.avatarUrl) || `/static/imgs/smile.png`" mode=" aspectFill"></image>
					</view>
					<view class="crUserName">
						{{ (source.User && source.User.username) || "神秘用户" }}
					</view>
					<view class="crAuthorTag" v-if="useUser.userInf.id===authorId">作者</view>
					<view class="crMyTag" v-else-if="useUser.userInf.id==source.UserId">我</view>
					<view class="crtime">{{timeInterval(source.date) }}</view>
					<!-- 				<view class="deleteIcon"
						v-if="useUser.userInf.id===source.UserId || useUser.userInf.role==='jyu_admin'"
						@click="deleteItem"><van-icon name="delete" color="#373737" /></view> -->
				</view>
				<view class="crContent">
					{{ source.content }}
				</view>
			</view>
			<!-- 		<view class="crConBth">
				<view class="crBthResponce">
					回复
				</view> -->
			<!-- <view class="crConCommentBthRight">
					<view class="crCommentDislike">
						<van-icon name="good-job-o" size="20" color="#9a9a9a" />
						{{0}}
					</view>
					<view class="crCommentLike">
						<van-icon name="good-job-o" size="20" color="#9a9a9a" />
						{{0}}
					</view>
				</view> -->
			<!-- </view> -->
		</view>
	</view>
</template>

<script setup>
	import {
		nextTick,
		ref,
		watch,
		inject
	} from 'vue';
	import {
		useUserStore
	} from '@/store';
	import timeInterval from '@/utils/timeInterval';
	const useUser = useUserStore()
	const props = defineProps({
		source: {
			type: Object,
			default: () => {
				return {
					source: {}
				}
			}
		},
		isShow: {
			type: Boolean,
			default: false,
		},
		authorId: {
			type: Number
		}
	});
	const isReady = ref(false)
	// watchEffect(() => {
	// 	console.log(props.isShow)//必须log,否则无法监听isShow变化
	// 	nextTick(() => {
	// 		isReady.value = props.isShow
	// 	})
	// })
	watch(() => props.isShow, (newValue) => {
		nextTick(() => {
			isReady.value = newValue
		})
	}, {
		immediate: true
	})
	const propsFunction = inject('propsFunction')
</script>

<style lang="less" scoped>
	.conChildrenComment {
		margin-left: 80rpx;
		height: auto;
		transition: all 0.6s;
		position: relative;
		overflow: hidden;

		.childrenCommentItem {
			display: flex;
			flex-direction: column;
			margin: 15rpx 0;
			width: 100%;
			transition: all 0.6s;
			opacity: 1;

			.conInf {
				&:active {
					background-color: #e5e5e5;
				}

				.crUserInf {
					height: 45rpx;
					width: 100%;
					display: flex;
					align-items: center;

					.crUserAvatar {
						height: 40rpx;
						width: 40rpx;
						border-radius: 50%;
						overflow: hidden;
						margin-right: 10rpx;
						background-color: #e5e5e5;

						image {
							height: 100%;
							width: 100%;
						}
					}

					.crUserName {
						line-height: 45rpx;
						font-size: 28rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						color: #737373;
						max-width: 70%;
						margin-right: 20rpx;
					}

					.crMyTag {
						// height: 30rpx;
						padding: 3rpx;
						line-height: 30rpx;
						color: #ffffff;
						font-size: 24rpx;
						background-color: #09e591;
						width: 30rpx;
						border-radius: 3rpx;
						margin-left: 5rpx;
						text-align: center;
					}

					.crAuthorTag {
						height: 30rpx;
						line-height: 30rpx;
						color: #fff;
						font-size: 20rpx;
						background-color: rgba(1, 148, 232, .8);
						width: 50rpx;
						border-radius: 3rpx;
						margin-right: 20rpx;
						text-align: center;
					}

					.crtime {
						color: #737373;
						line-height: 45rpx;
						font-size: 23rpx;
					}
				}

				.crContent {
					margin-left: 45rpx;
					font-size: 29rpx;
					font-weight: 550;
					color: #1d1d1d;
				}
			}




			.crConBth {
				color: #707070;
				display: flex;
				// justify-content: space-between;
				justify-content: end;
				height: 50rpx;
				width: 70%;
				margin-left: 30%;
				margin-top: 5rpx;
				font-size: 25rpx;

				.crBthResponce {
					height: 100%;
					line-height: 50rpx;
				}

				.crConCommentBthRight {
					height: 100%;
					display: flex;
					justify-content: space-between;
					width: 220rpx;

					.crCommentDislike,
					.crCommentLike {
						height: 100%;
						margin: 0 15rpx;
						display: flex;
						align-items: center;
					}
				}
			}
		}

		.childrenCommentItemUnShow {
			margin-top: -25%;
			opacity: 0;
			height: 0;
		}

		.bthUnShow {
			color: #1d1d1d;
			font-size: 28rpx;
			margin-bottom: 20rpx;
		}
	}
</style>